<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div v-text="msg"></div>
      <ul>
        <li v-for="(item,index) of arr" :key="item">
          <input type="checkbox" name="" id="" />
          {{item}}--{{index}}
        </li>
      </ul>
      <ul>
        <li v-for="(value,key,index) in obj">{{key}}--{{value}}--{{index}}</li>
      </ul>
    </div>
  </body>
</html>
<script src="./vue.js"></script>
<script>
  // v-for 可以循环数组 （item，index）in arr   item和index只是两个变量名（数组中的每一项，索引） 可以随意编写

  //   v-for 循环对象 （value,key,index）in obj  value对应对象中的属性值，key是对象的键，index是遍历的索引

  // v-for in v-for of 有什么区别？没有任何区别 vue在编译的时候只会把in和of作为一个分隔符来使用

  //   key属性存在的作用：key不能重复，重复会造成渲染错误
  // 1.区分唯一性
  // 2.使用了key 算法会对基于key的变化重新排列元素顺序，并且会移除掉key不存在的元素，提高算法效率

  //   vue是响应式编程
  // 有一些情况下数据更新了，视图不更新
  // vue2.0的问题
  // 使用的劫持属性的方法Object.defineProperty,缺点，就是没有办法劫持数组，vue采用hack的方式，hack了js数组原型上的方法
  // hack的方式有：push shift unshift pop reverse sort splice

  // 不更新的情况
  // 1.操作数组的length
  // 2.操作数组的index
  // 3.后添加的数据也不会更新

  //   解决方案（面试题）：你在vue开发过程中，遇到视图不更新这怎么办？
  // 1.不操作数组的length和index
  // 2.使用Vue.$set(target,key,value) 向响应式对象添加一个property，并确保这个新property同样是响应式的，且触发试图更新
  // 3.强制更新 this.$forceUpdate() 慎用 组件会从头到尾重新更新一遍，会带来效率问题
  const vm = new Vue({
    el: "#app",
    data: {
      msg: "v-for",
      arr: ["吃饭", "睡觉", "写代码"],
      obj: {
        name: "李磊",
        age: 18,
        hobby: "学习",
      },
    },
  });
</script>
